<template>
  <v-navigation-drawer
      expand-on-hover
      rail
  >
    <v-list>
      <v-list-item
          v-model="toke"
          :prepend-avatar="toke.avatar"
          :subtitle="toke.email"
          :title="toke.userName"
      />
    </v-list>
    <v-divider/>
    <v-list density="compact" nav>
      <v-list-item
          v-for="link in links" :value="link.path" :to="link.path" active-class="primary white--text"
          color="primary">
        <template #prepend>
          <v-icon>{{ link.icon }}</v-icon>
        </template>
        <v-list-item-title>{{ $t("text.route." + link.text) }}</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>
<script setup lang="ts">
import {ROUTES} from "~/resource/constants/route/route";
import {useUserStore} from "~/stores/user-store";
import {Token} from "~/resource/types/token/token";

const links = ref(useAuthRoute(ROUTES));
const userStore = useUserStore();
const toke = ref<Token>(new Token(userStore.getId, userStore.getUserName, userStore.getEmail, userStore.getAvatar, userStore.getAuthenticate, userStore.getAuthorities));
</script>
<style>

</style>
